<template>
  <div id="xx">
    <section class="box1">
      <section class="n1">
        <span class="iconfont icon-saoyisaox"></span>
      </section>
      <section class="n2">
          <section class="m1">
              <img src="@/assets/images/33.jpg" >
          </section>
          <section class="m2">
              <span class="iconfont icon-xiaoxi"></span>
          </section>
          <section class="m3">
              <router-link to="/SZym"><span class="iconfont icon-shezhi"></span></router-link>
          </section>
      </section>
    </section>

    <section class="box2">
        <section class="x1">
            <section class="k1">
                <img src="@/assets/images/34.jpg" >
            </section>
            <section class="k2">
                <router-link to="/DL">
                <section class="k-up">点击注册登录</section>
                </router-link>
                <section class="k-down">个性签名</section>
            </section>
        </section>
        <section class="x2">
            <ul>
                <li>
                    <section class="li-up">0</section>
                    <section class="li-down">获赞</section>
                </li>

                <li>
                    <section class="li-up">0</section>
                    <section class="li-down">粉丝</section>
                </li>

                <li>
                    <section class="li-up">0</section>
                    <section class="li-down">关注</section>
                </li>

                <li>
                    <section class="li-up">0</section>
                    <section class="li-down">动态</section>
                </li>
                
            </ul>
        </section>
    </section>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#xx {
  width: 100%;
  height: 1.8rem;
  /* background: thistle; */
}
#xx .box1 {
  width: 100%;
  height: 0.2rem;
  margin-top: 0.22rem;
  /* background: silver; */
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: .2rem;
}
#xx .box1 img{
    width: 100%;
    height: 100%;
}
#xx .box1 .n1 {
  width: 0.2rem;
  height: 0.2rem;
  /* background: springgreen; */
}
#xx .box1 .n2 {
  width: 1.5rem;
  height: 0.2rem;
  /* background: tan; */
  display: flex;
  justify-content: space-between;
}
#xx .box1 .n2 .m1{
    width: .77rem;
    height: .2rem;
}
#xx .box1 .n2 .m2,.m3{
    width: .2rem;
    height: .2rem;
    /* background: cornflowerblue; */
}
#xx .box2{
    width: 3.41rem;
    height: 1.37rem;
    /* background: cyan; */
    margin: auto;
    padding-top: .26rem;
}
#xx .box2 .x1{
    width: 3.41rem;
    height: .54rem;
    /* background: darkkhaki; */
    display: flex;
    
}
#xx .box2 .x2{
    width: 100%;
    height: .59rem;
    /* background: darkseagreen; */
}
#xx .box2 .x2 ul{
    display: flex;
    justify-content: space-around;
}
#xx .box2 .x2 ul li{
    width: .59rem;
    height: .59rem;
    /* border: .01rem solid black; */
}
#xx .box2 .x2 ul li .li-up,.li-down{
    width: .59rem;
    height: .285rem;
    text-align: center;
    line-height: .285rem;
}
#xx .box2 .x2 ul li .li-up{
    font-size: .2rem;
    font-weight: 700;
}
#xx .box2 .x2 ul li .li-down{
    width: 100%;
    -webkit-transform:scale(0.833) ;
    font-size: .12rem;
    color: slategray;
}
#xx .box2 .x1 .k1{
    width: .54rem;
    height: .54rem;
    /* background: darkturquoise; */
    border-radius: 50%;
    
}
#xx .box2 .x1 .k1 img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
}
#xx .box2 .x1 .k2{
    width: 1.6rem;
    height: .54rem;
    /* background: goldenrod; */
}

#xx .box2 .x1 .k2 .k-up{
    width: 100%;
    height: .34rem;
    text-align: center;
    line-height: .34rem;
    font-weight: 700;
    font-size: .18rem;
    color: black;
}
#xx .box2 .x1 .k2 .k-down{
    width: 100%;
    height: .2rem;
    text-align: center;
    line-height: .2rem;
    font-size: .14rem;
    color: gray;
}
</style>